<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<div class="app">
	<div class="dialog" v-bind:class="{ 'active': isActive }" >
		<form>
			<div class="to">To : <input type="text" id="tos" /></div>
			<div class="test"><textarea type="text" id="textss" ></textarea></div>
			<div class="from">From ：<input type="text" id="froms"/></div>
			<div style="text-align: center;margin-top: 20px;">权限：<select id="create_type" >
				<option value ="总结报告">所有人</option> 
				<option value ="辅助授课">输入密码</option> 
				<option value ="其他">一次销毁</option> 
				</select>
		
		
		   <button class="my-btn-gray" >取消</button>
		   <button class="my-btn-blue" >粘贴</button>
		</div>
		</form>
	</div>
</div>
</body>
</html>
<script>
	new Vue({
		el:".app",
		data() {
			return {
				isActive:true
			}
		},
	})
</script>
<style>
	.active{border: 5px solid red;}
	.dialog{
		position: absolute; top: 30%;left: 30%;
		background-image: url(img/便签背景图.png);
		background-size: 100%;
		width: 645px;
		height: 388px;
		font-size: 20px;
	}
	textarea,input{
		border: 0;
		outline: none;
		background: transparent;
		border: 1px soild green;
		line-height: 30px;
	}
	textarea{
		overflow-y:hidden;
		text-overflow: ellipsis;
		height: 100%;
		width: 100%;
		text-align: center;
	
	}
	.to{
		padding-left: 60px;
		padding-top:42px ;
		height: 38px;
	}
	#tos,#froms{
		height: 30px;
		size: 30px;
	}
	.from{
		text-align: right;
		margin-right: 20px;
	}
	.test{
		height: 200px;
		width: 80%;
		margin: 0 auto ;
	}
	#textss{
		font-size: 20px;
	}
	.my-btn-blue,.my-btn-gray{
		width: 60px;
		height: 30px;
		font-size: 15px;
		background-color: bisque;
		border: 0px;
		border-radius: 5px;
	}
</style>